<template>
  <el-dialog width="58%" :title="title" :visible.sync="visible">
    <el-form
      ref="form"
      :rules="rules"
      :model="model"
      :disabled="disableSubmit"
      label-width="160px"
      size="small"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="name" label="资产名称">
            <el-input readonly placeholder="请输入资产名称" v-model="model.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="number" label="资产Id">
            <el-input readonly placeholder="请输入资产Id" v-model="model.number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="price" label="价格（元）">
            <el-input-number
              controls-position="right"
              :precision="2"
              :step="0.1"
              placeholder="请输入价格"
              v-model="model.price"
              disabled
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="unit" label="计量单位">
            <el-input readonly placeholder="请输计量单位" v-model="model.unit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="model" label="规格型号">
            <el-input readonly placeholder="请输入规格型号" v-model="model.model"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="buyer" label="购买单位">
            <el-input readonly placeholder="请输入购买单位" v-model="model.buyer"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="isFixed" label="是否属于固定资产">
            <el-switch disabled v-model="model.isFixed"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="isFax" label="是否含税">
            <el-switch disabled v-model="model.isFax"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="manufacturer" label="供应商">
            <el-input
              readonly
              placeholder="请输入购买单位"
              v-model="model.manufacturer"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用期限" prop="usefulLife">
            <el-date-picker readonly style="width: 100%;" v-model="model.usefulLife" type="date" placeholder="选择使用期限"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="model" label="盘点状态">
            <el-select  v-model="model.itemState" placeholder="请选择盘点状态">
              <el-option :key="1" label="未盘" :value="1"></el-option>
              <el-option :key="2" label="已盘" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="useState" label="资产使用状态">
            <el-select v-model="model.useState" placeholder="请选择资产使用状态">
              <el-option :key="1" label="正常" :value="1"></el-option>
              <el-option :key="2" label="损坏" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!disableSubmit" slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from "vue";
import { MessageBox, Message, Notification } from "element-ui";
import pick from "lodash.pick";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import ImageUpload from "@/components/ImageUpload";
import { getAction, deleteAction, putAction, postAction } from "@/api/manage";

export default {
  name: "assetCheck",
  components: {
    ImageUpload
  },
  data() {
    return {
      title: "操作",
      visible: false,
      loading: false,
      disableSubmit: false,
      model: {},
      url: {}, // 新增资产表单验证
      rules: {
        itemState: [
          { required: true, message: "请输入盘点状态", trigger: "blur" }
        ],
        useState: [
          { required: true, message: "请输入资产使用状态", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = { "X-Access-Token": token };
  },
  methods: {
    refresh() {},
    add() {
      this.refresh();
      this.edit({});
    },
    edit(record) {
      let that = this;
      this.visible = true;
      this.disableSubmit = false;
      if (that.$refs.form) {
        that.$refs.form.resetFields();
        that.model = Object.assign({}, record);
      } else {
        this.$nextTick(() => {
          that.$refs.form.resetFields();
          that.model = Object.assign({}, record);
        });
      }
    },
    handleSubmit() {
      const that = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let promise;

          promise = putAction(
            "/inventory/updateItemAssetState",
            Object.assign({}, this.model)
          );

          promise

            .then(res => {
              if (res.success) {
                this.$message.success(res.message);
                that.close();
                that.$emit("ok");
              } else {
                this.$message.warning(res.message);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
</style>
